<template>
  <div class="admin-schedule">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2>排班管理</h2>
      <div class="header-actions">
        <el-button type="success" @click="handleAutoSchedule">
          <el-icon><MagicStick /></el-icon>
          自动排班
        </el-button>
        <el-button type="primary" @click="handleAddSchedule">
          <el-icon><Plus /></el-icon>
          新增排班
        </el-button>
        <el-button @click="handleRefresh">
          <el-icon><Refresh /></el-icon>
          刷新
        </el-button>
      </div>
    </div>

    <!-- 筛选条件 -->
    <div class="filter-section">
      <el-card class="filter-card">
        <el-form :model="filterForm" inline>
          <el-form-item label="员工">
            <el-select
              v-model="filterForm.employeeId"
              placeholder="请选择员工"
              filterable
              clearable
              style="width: 200px"
            >
              <el-option
                v-for="employee in employeeList"
                :key="employee.id"
                :label="employee.name"
                :value="employee.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="房间">
            <el-select
              v-model="filterForm.roomId"
              placeholder="请选择房间"
              filterable
              clearable
              style="width: 150px"
            >
              <el-option
                v-for="room in roomList"
                :key="room.id"
                :label="room.roomNumber"
                :value="room.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="日期范围">
            <el-date-picker
              v-model="filterForm.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              style="width: 250px"
            />
          </el-form-item>
          <el-form-item label="状态">
            <el-select
              v-model="filterForm.status"
              placeholder="全部状态"
              clearable
              style="width: 120px"
            >
              <el-option label="已确认" value="CONFIRMED" />
              <el-option label="待确认" value="PENDING" />
              <el-option label="已取消" value="CANCELLED" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleFilter">查询</el-button>
            <el-button @click="handleResetFilter">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>

    <!-- 统计信息 -->
    <div class="stats-section">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-item">
              <div class="stat-icon">
                <el-icon><User /></el-icon>
              </div>
              <div class="stat-content">
                <div class="stat-value">{{ scheduleStats.totalEmployees }}</div>
                <div class="stat-label">参与员工数</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-item">
              <div class="stat-icon">
                <el-icon><Calendar /></el-icon>
              </div>
              <div class="stat-content">
                <div class="stat-value">{{ scheduleStats.totalSchedules }}</div>
                <div class="stat-label">总排班数</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-item">
              <div class="stat-icon">
                <el-icon><Clock /></el-icon>
              </div>
              <div class="stat-content">
                <div class="stat-value">{{ scheduleStats.totalHours }}</div>
                <div class="stat-label">总工作小时</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="stat-card">
            <div class="stat-item">
              <div class="stat-icon">
                <el-icon><Warning /></el-icon>
              </div>
              <div class="stat-content">
                <div class="stat-value">{{ scheduleStats.pendingSchedules }}</div>
                <div class="stat-label">待确认排班</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 视图切换 -->
    <div class="view-section">
      <el-card class="view-card">
        <div class="view-toolbar">
          <div class="view-toggle">
            <el-radio-group v-model="viewMode">
              <el-radio-button label="calendar">日历视图</el-radio-button>
              <el-radio-button label="table">表格视图</el-radio-button>
              <el-radio-button label="gantt">甘特图</el-radio-button>
            </el-radio-group>
          </div>
          <div class="view-actions">
            <el-button type="warning" @click="handleBatchConfirm" :disabled="selectedSchedules.length === 0">
              批量确认
            </el-button>
            <el-button type="danger" @click="handleBatchDelete" :disabled="selectedSchedules.length === 0">
              批量删除
            </el-button>
          </div>
        </div>

        <!-- 日历视图 -->
        <div v-if="viewMode === 'calendar'" class="calendar-view">
          <div class="calendar-nav">
            <el-button @click="handlePrevWeek">
              <el-icon><ArrowLeft /></el-icon>
              上周
            </el-button>
            <span class="current-week">{{ currentWeekText }}</span>
            <el-button @click="handleNextWeek">
              下周
              <el-icon><ArrowRight /></el-icon>
            </el-button>
          </div>

          <div class="weekly-calendar">
            <div class="calendar-header">
              <div class="time-column">时间</div>
              <div
                v-for="day in weekDays"
                :key="day.date"
                class="day-column"
              >
                <div class="day-date">{{ day.date }}</div>
                <div class="day-name">{{ day.name }}</div>
              </div>
            </div>
            <div class="calendar-body">
              <div
                v-for="hour in timeSlots"
                :key="hour"
                class="time-row"
              >
                <div class="time-cell">{{ hour }}:00</div>
                <div
                  v-for="day in weekDays"
                  :key="`${day.date}-${hour}`"
                  class="schedule-cell"
                  @click="handleCellClick(day.date, hour)"
                >
                  <div
                    v-for="schedule in getScheduleForDateTime(day.date, hour)"
                    :key="schedule.id"
                    :class="['schedule-block', getScheduleStatusClass(schedule.status)]"
                    @click.stop="handleViewScheduleDetail(schedule)"
                  >
                    <div class="schedule-employee">{{ schedule.employeeName }}</div>
                    <div class="schedule-room">{{ schedule.roomNumber }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 表格视图 -->
        <div v-if="viewMode === 'table'" class="table-view">
          <el-table
            v-loading="loading"
            :data="scheduleList"
            stripe
            border
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column prop="employeeName" label="员工姓名" width="120" />
            <el-table-column prop="employeeType" label="员工类型" width="100">
              <template #default="{ row }">
                <el-tag :type="getEmployeeTypeTagType(row.employeeType)">
                  {{ getEmployeeTypeText(row.employeeType) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="date" label="日期" width="120">
              <template #default="{ row }">
                {{ formatDate(row.date) }}
              </template>
            </el-table-column>
            <el-table-column prop="startTime" label="开始时间" width="100" />
            <el-table-column prop="endTime" label="结束时间" width="100" />
            <el-table-column prop="roomNumber" label="房间" width="100" />
            <el-table-column prop="customerName" label="客户" width="120" />
            <el-table-column prop="workHours" label="工作时长" width="100">
              <template #default="{ row }">
                {{ row.workHours }}小时
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="100">
              <template #default="{ row }">
                <el-tag :type="getScheduleStatusTagType(row.status)">
                  {{ getScheduleStatusText(row.status) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="createdAt" label="创建时间" width="150">
              <template #default="{ row }">
                {{ formatDateTime(row.createdAt) }}
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200" fixed="right">
              <template #default="{ row }">
                <el-button type="primary" size="small" @click="handleViewScheduleDetail(row)">
                  详情
                </el-button>
                <el-button type="warning" size="small" @click="handleEditSchedule(row)">
                  编辑
                </el-button>
                <el-button type="danger" size="small" @click="handleDeleteSchedule(row)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <div class="pagination">
            <el-pagination
              v-model:current-page="pagination.page"
              v-model:page-size="pagination.size"
              :total="pagination.total"
              :page-sizes="[10, 20, 50, 100]"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>

        <!-- 甘特图视图 -->
        <div v-if="viewMode === 'gantt'" class="gantt-view">
          <div class="gantt-placeholder">
            <el-empty description="甘特图功能开发中..." />
          </div>
        </div>
      </el-card>
    </div>

    <!-- 排班表单对话框 -->
    <el-dialog
      v-model="scheduleDialogVisible"
      :title="isEditMode ? '编辑排班' : '新增排班'"
      width="600px"
    >
      <el-form
        ref="scheduleFormRef"
        :model="scheduleForm"
        :rules="scheduleFormRules"
        label-width="100px"
      >
        <el-form-item label="员工" prop="employeeId">
          <el-select
            v-model="scheduleForm.employeeId"
            placeholder="请选择员工"
            filterable
            style="width: 100%"
          >
            <el-option
              v-for="employee in employeeList"
              :key="employee.id"
              :label="employee.name"
              :value="employee.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="房间" prop="roomId">
          <el-select
            v-model="scheduleForm.roomId"
            placeholder="请选择房间"
            filterable
            style="width: 100%"
          >
            <el-option
              v-for="room in roomList"
              :key="room.id"
              :label="room.roomNumber"
              :value="room.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="客户" prop="customerId">
          <el-select
            v-model="scheduleForm.customerId"
            placeholder="请选择客户"
            filterable
            style="width: 100%"
          >
            <el-option
              v-for="customer in customerList"
              :key="customer.id"
              :label="customer.name"
              :value="customer.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="日期" prop="date">
          <el-date-picker
            v-model="scheduleForm.date"
            type="date"
            placeholder="请选择日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="开始时间" prop="startTime">
          <el-time-picker
            v-model="scheduleForm.startTime"
            placeholder="请选择开始时间"
            format="HH:mm"
            value-format="HH:mm"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="结束时间" prop="endTime">
          <el-time-picker
            v-model="scheduleForm.endTime"
            placeholder="请选择结束时间"
            format="HH:mm"
            value-format="HH:mm"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            v-model="scheduleForm.remarks"
            type="textarea"
            :rows="3"
            placeholder="请输入备注信息"
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="scheduleDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSaveSchedule" :loading="saving">
            {{ isEditMode ? '更新' : '保存' }}
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 自动排班对话框 -->
    <el-dialog
      v-model="autoScheduleDialogVisible"
      title="自动排班"
      width="500px"
    >
      <el-form :model="autoScheduleForm" label-width="100px">
        <el-form-item label="排班日期">
          <el-date-picker
            v-model="autoScheduleForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="员工类型">
          <el-checkbox-group v-model="autoScheduleForm.employeeTypes">
            <el-checkbox label="FULL_TIME">全职员工</el-checkbox>
            <el-checkbox label="PART_TIME">兼职员工</el-checkbox>
            <el-checkbox label="TEMPORARY">临时工</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="工作时间">
          <el-time-picker
            v-model="autoScheduleForm.workHours"
            is-range
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="HH:mm"
            value-format="HH:mm"
            style="width: 100%"
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="autoScheduleDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleConfirmAutoSchedule" :loading="autoScheduling">
            开始自动排班
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  MagicStick,
  Plus,
  Refresh,
  User,
  Calendar,
  Clock,
  Warning,
  ArrowLeft,
  ArrowRight
} from '@element-plus/icons-vue'
import {
  getAdminScheduleView,
  createSchedule,
  updateSchedule,
  deleteSchedule,
  autoSchedule
} from '@/api/schedule'
import { getActiveEmployees } from '@/api/employee'
import { getActiveRooms } from '@/api/room'
import { getActiveCustomers } from '@/api/customer'

// 响应式数据
const loading = ref(false)
const saving = ref(false)
const autoScheduling = ref(false)
const viewMode = ref('table')
const currentWeek = ref(new Date())
const scheduleList = ref([])
const selectedSchedules = ref([])
const employeeList = ref([])
const roomList = ref([])
const customerList = ref([])
const scheduleStats = ref({
  totalEmployees: 0,
  totalSchedules: 0,
  totalHours: 0,
  pendingSchedules: 0
})

// 对话框状态
const scheduleDialogVisible = ref(false)
const autoScheduleDialogVisible = ref(false)
const isEditMode = ref(false)

// 筛选表单
const filterForm = reactive({
  employeeId: null,
  roomId: null,
  dateRange: [],
  status: null
})

// 分页信息
const pagination = reactive({
  page: 1,
  size: 10,
  total: 0
})

// 排班表单
const scheduleForm = reactive({
  employeeId: null,
  roomId: null,
  customerId: null,
  date: '',
  startTime: '',
  endTime: '',
  remarks: ''
})

// 自动排班表单
const autoScheduleForm = reactive({
  dateRange: [],
  employeeTypes: ['FULL_TIME'],
  workHours: []
})

// 表单验证规则
const scheduleFormRules = {
  employeeId: [{ required: true, message: '请选择员工', trigger: 'change' }],
  roomId: [{ required: true, message: '请选择房间', trigger: 'change' }],
  customerId: [{ required: true, message: '请选择客户', trigger: 'change' }],
  date: [{ required: true, message: '请选择日期', trigger: 'change' }],
  startTime: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
  endTime: [{ required: true, message: '请选择结束时间', trigger: 'change' }]
}

// 时间段
const timeSlots = Array.from({ length: 24 }, (_, i) => i)

// 当前周文本
const currentWeekText = computed(() => {
  const startOfWeek = new Date(currentWeek.value)
  startOfWeek.setDate(startOfWeek.getDate() - startOfWeek.getDay())
  const endOfWeek = new Date(startOfWeek)
  endOfWeek.setDate(endOfWeek.getDate() + 6)
  
  return `${startOfWeek.toLocaleDateString('zh-CN')} - ${endOfWeek.toLocaleDateString('zh-CN')}`
})

// 周天数
const weekDays = computed(() => {
  const days = []
  const startOfWeek = new Date(currentWeek.value)
  startOfWeek.setDate(startOfWeek.getDate() - startOfWeek.getDay())
  
  for (let i = 0; i < 7; i++) {
    const day = new Date(startOfWeek)
    day.setDate(day.getDate() + i)
    days.push({
      date: day.toISOString().split('T')[0],
      name: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][i]
    })
  }
  
  return days
})

// 获取基础数据
const fetchBaseData = async () => {
  try {
    const [employeesRes, roomsRes, customersRes] = await Promise.all([
      getActiveEmployees(),
      getActiveRooms(),
      getActiveCustomers()
    ])
    
    employeeList.value = employeesRes.data || []
    roomList.value = roomsRes.data || []
    customerList.value = customersRes.data || []
  } catch (error) {
    ElMessage.error('获取基础数据失败')
  }
}

// 获取排班数据
const fetchScheduleData = async () => {
  loading.value = true
  try {
    const params = {
      employeeId: filterForm.employeeId,
      roomId: filterForm.roomId,
      status: filterForm.status,
      page: pagination.page - 1,
      size: pagination.size
    }
    
    if (filterForm.dateRange && filterForm.dateRange.length === 2) {
      params.startDate = filterForm.dateRange[0]
      params.endDate = filterForm.dateRange[1]
    }

    const response = await getAdminScheduleView(params)
    const data = response.data
    
    scheduleList.value = data.schedules || []
    scheduleStats.value = data.statistics || scheduleStats.value
    pagination.total = data.totalElements || 0
  } catch (error) {
    ElMessage.error('获取排班数据失败')
  } finally {
    loading.value = false
  }
}

// 获取指定日期时间的排班
const getScheduleForDateTime = (date, hour) => {
  return scheduleList.value.filter(schedule => {
    if (schedule.date !== date) return false
    const startHour = parseInt(schedule.startTime.split(':')[0])
    const endHour = parseInt(schedule.endTime.split(':')[0])
    return hour >= startHour && hour < endHour
  })
}

// 处理筛选
const handleFilter = () => {
  pagination.page = 1
  fetchScheduleData()
}

// 重置筛选
const handleResetFilter = () => {
  Object.assign(filterForm, {
    employeeId: null,
    roomId: null,
    dateRange: [],
    status: null
  })
  pagination.page = 1
  fetchScheduleData()
}

// 刷新数据
const handleRefresh = () => {
  fetchScheduleData()
}

// 上一周
const handlePrevWeek = () => {
  const prevWeek = new Date(currentWeek.value)
  prevWeek.setDate(prevWeek.getDate() - 7)
  currentWeek.value = prevWeek
}

// 下一周
const handleNextWeek = () => {
  const nextWeek = new Date(currentWeek.value)
  nextWeek.setDate(nextWeek.getDate() + 7)
  currentWeek.value = nextWeek
}

// 处理单元格点击
const handleCellClick = (date, hour) => {
  scheduleForm.date = date
  scheduleForm.startTime = `${hour.toString().padStart(2, '0')}:00`
  scheduleForm.endTime = `${(hour + 1).toString().padStart(2, '0')}:00`
  isEditMode.value = false
  scheduleDialogVisible.value = true
}

// 新增排班
const handleAddSchedule = () => {
  Object.assign(scheduleForm, {
    employeeId: null,
    roomId: null,
    customerId: null,
    date: '',
    startTime: '',
    endTime: '',
    remarks: ''
  })
  isEditMode.value = false
  scheduleDialogVisible.value = true
}

// 编辑排班
const handleEditSchedule = (schedule) => {
  Object.assign(scheduleForm, {
    id: schedule.id,
    employeeId: schedule.employeeId,
    roomId: schedule.roomId,
    customerId: schedule.customerId,
    date: schedule.date,
    startTime: schedule.startTime,
    endTime: schedule.endTime,
    remarks: schedule.remarks
  })
  isEditMode.value = true
  scheduleDialogVisible.value = true
}

// 保存排班
const handleSaveSchedule = async () => {
  // 表单验证逻辑
  saving.value = true
  try {
    if (isEditMode.value) {
      await updateSchedule(scheduleForm.id, scheduleForm)
      ElMessage.success('排班更新成功')
    } else {
      await createSchedule(scheduleForm)
      ElMessage.success('排班创建成功')
    }
    
    scheduleDialogVisible.value = false
    fetchScheduleData()
  } catch (error) {
    ElMessage.error(isEditMode.value ? '更新排班失败' : '创建排班失败')
  } finally {
    saving.value = false
  }
}

// 删除排班
const handleDeleteSchedule = async (schedule) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除 ${schedule.employeeName} 在 ${schedule.date} 的排班吗？`,
      '删除确认',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    await deleteSchedule(schedule.id)
    ElMessage.success('删除成功')
    fetchScheduleData()
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('删除失败')
    }
  }
}

// 自动排班
const handleAutoSchedule = () => {
  Object.assign(autoScheduleForm, {
    dateRange: [],
    employeeTypes: ['FULL_TIME'],
    workHours: []
  })
  autoScheduleDialogVisible.value = true
}

// 确认自动排班
const handleConfirmAutoSchedule = async () => {
  autoScheduling.value = true
  try {
    const params = {
      startDate: autoScheduleForm.dateRange[0],
      endDate: autoScheduleForm.dateRange[1],
      employeeTypes: autoScheduleForm.employeeTypes,
      startTime: autoScheduleForm.workHours[0],
      endTime: autoScheduleForm.workHours[1]
    }
    
    await autoSchedule(params)
    ElMessage.success('自动排班完成')
    autoScheduleDialogVisible.value = false
    fetchScheduleData()
  } catch (error) {
    ElMessage.error('自动排班失败')
  } finally {
    autoScheduling.value = false
  }
}

// 选择变化
const handleSelectionChange = (selection) => {
  selectedSchedules.value = selection
}

// 批量确认
const handleBatchConfirm = async () => {
  try {
    await ElMessageBox.confirm(
      `确定要确认选中的 ${selectedSchedules.value.length} 个排班吗？`,
      '批量确认',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }
    )
    
    // 批量确认逻辑
    ElMessage.success('批量确认成功')
    fetchScheduleData()
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('批量确认失败')
    }
  }
}

// 批量删除
const handleBatchDelete = async () => {
  try {
    await ElMessageBox.confirm(
      `确定要删除选中的 ${selectedSchedules.value.length} 个排班吗？`,
      '批量删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    // 批量删除逻辑
    ElMessage.success('批量删除成功')
    fetchScheduleData()
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('批量删除失败')
    }
  }
}

// 查看排班详情
const handleViewScheduleDetail = (schedule) => {
  ElMessage.info('查看排班详情功能待实现')
}

// 分页大小变化
const handleSizeChange = (size) => {
  pagination.size = size
  pagination.page = 1
  fetchScheduleData()
}

// 当前页变化
const handleCurrentChange = (page) => {
  pagination.page = page
  fetchScheduleData()
}

// 获取员工类型标签类型
const getEmployeeTypeTagType = (type) => {
  const typeMap = {
    FULL_TIME: 'success',
    PART_TIME: 'warning',
    TEMPORARY: 'info'
  }
  return typeMap[type] || 'info'
}

// 获取员工类型文本
const getEmployeeTypeText = (type) => {
  const typeMap = {
    FULL_TIME: '全职',
    PART_TIME: '兼职',
    TEMPORARY: '临时工'
  }
  return typeMap[type] || type
}

// 获取排班状态样式类
const getScheduleStatusClass = (status) => {
  const classMap = {
    CONFIRMED: 'status-confirmed',
    PENDING: 'status-pending',
    CANCELLED: 'status-cancelled'
  }
  return classMap[status] || 'status-pending'
}

// 获取排班状态标签类型
const getScheduleStatusTagType = (status) => {
  const typeMap = {
    CONFIRMED: 'success',
    PENDING: 'warning',
    CANCELLED: 'danger'
  }
  return typeMap[status] || 'info'
}

// 获取排班状态文本
const getScheduleStatusText = (status) => {
  const textMap = {
    CONFIRMED: '已确认',
    PENDING: '待确认',
    CANCELLED: '已取消'
  }
  return textMap[status] || status
}

// 格式化日期
const formatDate = (date) => {
  if (!date) return '-'
  return new Date(date).toLocaleDateString('zh-CN')
}

// 格式化日期时间
const formatDateTime = (dateTime) => {
  if (!dateTime) return '-'
  return new Date(dateTime).toLocaleString('zh-CN')
}

// 组件挂载时获取数据
onMounted(() => {
  fetchBaseData()
  fetchScheduleData()
})
</script>

<style scoped>
.admin-schedule {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
  color: #303133;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.filter-section {
  margin-bottom: 20px;
}

.filter-card {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.stats-section {
  margin-bottom: 20px;
}

.stat-card {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.stat-item {
  display: flex;
  align-items: center;
  padding: 15px;
}

.stat-icon {
  font-size: 32px;
  color: #409eff;
  margin-right: 15px;
}

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 14px;
  color: #666;
}

.view-section {
  margin-bottom: 20px;
}

.view-card {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.view-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.view-actions {
  display: flex;
  gap: 10px;
}

.calendar-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

.current-week {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.weekly-calendar {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  overflow: hidden;
}

.calendar-header {
  display: flex;
  background-color: #f5f7fa;
  border-bottom: 1px solid #ebeef5;
}

.time-column {
  width: 80px;
  padding: 10px;
  text-align: center;
  font-weight: 600;
  border-right: 1px solid #ebeef5;
}

.day-column {
  flex: 1;
  padding: 10px;
  text-align: center;
  border-right: 1px solid #ebeef5;
}

.day-column:last-child {
  border-right: none;
}

.day-date {
  font-weight: 600;
  margin-bottom: 5px;
}

.day-name {
  font-size: 12px;
  color: #666;
}

.calendar-body {
  max-height: 600px;
  overflow-y: auto;
}

.time-row {
  display: flex;
  border-bottom: 1px solid #ebeef5;
}

.time-cell {
  width: 80px;
  padding: 10px;
  text-align: center;
  font-size: 12px;
  color: #666;
  border-right: 1px solid #ebeef5;
  background-color: #fafafa;
}

.schedule-cell {
  flex: 1;
  min-height: 40px;
  padding: 5px;
  border-right: 1px solid #ebeef5;
  cursor: pointer;
  position: relative;
}

.schedule-cell:hover {
  background-color: #f0f9ff;
}

.schedule-cell:last-child {
  border-right: none;
}

.schedule-block {
  padding: 2px 4px;
  margin-bottom: 2px;
  border-radius: 3px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.3s;
}

.schedule-block:hover {
  transform: scale(1.05);
}

.status-confirmed {
  background-color: #f0f9ff;
  border: 1px solid #67c23a;
  color: #67c23a;
}

.status-pending {
  background-color: #fdf6ec;
  border: 1px solid #e6a23c;
  color: #e6a23c;
}

.status-cancelled {
  background-color: #fef0f0;
  border: 1px solid #f56c6c;
  color: #f56c6c;
}

.schedule-employee {
  font-weight: 600;
}

.schedule-room {
  font-size: 10px;
  opacity: 0.8;
}

.table-view {
  min-height: 400px;
}

.pagination {
  margin-top: 20px;
  text-align: right;
}

.gantt-placeholder {
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dialog-footer {
  text-align: right;
}

.el-table {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>